<!-- 执行工单详情 -->
<template>
  <div class="view-pre">
    <div class="view-mb20">
      <px-scrollbar>
        <EditDropDown v-if="data?.contentDTOList?.length > 0" dropdownTitle="环境巡检">
          <template v-slot:content>
            <SubEditDropDown
              v-for="(inspectItem, inspectIndex) in data.contentDTOList"
              :key="`SubEditDropDown${inspectIndex}`"
              :dropdownTitle="`${inspectItem.inspectItemContent}`"
              :isDropdown="false"
            >
              <template v-slot:content>
                <LazyRender>
                  <px-table
                    v-if="inspectItem.inspectItemType === 1"
                    :data="inspectItem.contentItemDTOList"
                    style="margin-bottom: 18px"
                    class="equip-table"
                    size="small"
                    max-height="400"
                    border
                  >
                    <px-table-column fixed="left" prop="meterReadingModeDesc" label="抄表方式" min-width="80" show-overflow-tooltip>
                      <template #default="scope">
                        <span>{{ scope.row.meterReadingModeDesc }}</span>
                      </template>
                    </px-table-column>
                    <px-table-column fixed="left" prop="meterReadingItem" label="抄表项" min-width="140" show-overflow-tooltip />
                    <px-table-column prop="unit" label="单位" min-width="50" show-overflow-tooltip />
                    <px-table-column prop="maxValue" label="最大值" min-width="100" show-overflow-tooltip />
                    <px-table-column prop="minValue" label="最小值" min-width="100" show-overflow-tooltip />
                    <!-- <px-table-column prop="eqpName" label="设备" min-width="150" show-overflow-tooltip />
                      <px-table-column prop="autoMeterReadingPoint" label="自动抄表点" min-width="150" show-overflow-tooltip /> -->
                    <px-table-column prop="eqpId" label="设备" min-width="260">
                      <template #default="scope">
                        <template v-if="isTableEdit === 'view'">{{
                          scope.row.eqpName || scope.row.eqpId ? `${scope.row.eqpName}(${scope.row.eqpId})` : ""
                        }}</template>
                        <template v-else>
                          <span v-if="scope.row.eqpName || scope.row.eqpId" class="mr-[8px]">{{ `${scope.row.eqpName}(${scope.row.eqpId})` }}</span>
                          <px-input
                            v-else
                            v-model="scope.row.eqpName"
                            placeholder="请点击选择"
                            maxlength="50"
                            disabled
                            style="width: calc(100% - 108px); margin-right: 8px"
                          />
                          <px-button type="primary" plain style="width: 100px" @click="selectEqp(inspectIndex, scope.$index)">选择设备</px-button>
                        </template>
                      </template>
                    </px-table-column>
                    <px-table-column prop="autoMeterReadingPoint" label="自动抄表点" min-width="160" show-overflow-tooltip>
                      <template #default="scope">
                        <template v-if="isTableEdit === 'view'">{{ scope.row.autoMeterReadingPointName }}</template>
                        <template v-else>
                          <PointSelect
                            v-model="scope.row"
                            :eqpId="scope.row.eqpId"
                            :disabled="!scope.row.eqpId"
                            :meterReadingPointList="meterReadingPointList"
                            @focusAutoMeterReadingPoint="focusAutoMeterReadingPoint"
                          />
                          <!-- <px-select
                            v-model="scope.row.autoMeterReadingPoint"
                            placeholder="请选择自动抄表点"
                            clearable
                            :disabled="!scope.row.eqpId"
                            style="width: 100%"
                            @focus="focusAutoMeterReadingPoint(scope.row.eqpId)"
                          >
                            <px-option v-for="item in meterReadingPointList" :key="item.id" :label="item.attributeName" :value="item.positionNum" />
                          </px-select> -->
                        </template>
                      </template>
                    </px-table-column>
                  </px-table>
                  <px-table
                    v-else
                    :data="inspectItem.contentItemDTOList"
                    style="margin-bottom: 18px"
                    class="equip-table"
                    size="small"
                    max-height="400"
                    border
                  >
                    <px-table-column fixed="left" prop="inspectItem" label="巡检项" min-width="160" show-overflow-tooltip />
                    <px-table-column prop="inspectContent" label="巡检内容" min-width="140" show-overflow-tooltip />
                    <px-table-column prop="inspectContentRangeValue" label="内容范围" min-width="160" show-overflow-tooltip>
                      <template #default="scope">
                        <div v-if="scope.row.inspectContentRangeCode === 1">文本</div>
                        <div v-if="scope.row.inspectContentRangeCode === 2">数字</div>
                        <div v-if="scope.row.inspectContentRangeCode === 3">判断：{{ scope.row.inspectContentRangeValue || "-" }}</div>
                        <div v-if="scope.row.inspectContentRangeCode === 4">选择：{{ scope.row.inspectContentRangeValue || "-" }}</div>
                      </template>
                    </px-table-column>
                  </px-table>
                </LazyRender>
              </template>
            </SubEditDropDown>
          </template>
        </EditDropDown>
        <EditDropDown v-if="data?.eqpContentDTOList?.length > 0" dropdownTitle="设备巡检">
          <template v-slot:content>
            <TitleDropDown
              v-for="(eqpItem, eqpIndex) in data.eqpContentDTOList"
              :key="eqpItem.eqpId"
              :index="eqpIndex + 1"
              :dropdownTitle="`${eqpItem.eqpName}（${eqpItem.eqpId}）`"
              class="equip-name-dropdown"
            >
              <template v-slot:content>
                <SubEditDropDown
                  v-for="inspectItem in eqpItem.contentDTOList"
                  :key="inspectItem.inspectTaskTemContentId"
                  :dropdownTitle="inspectItem.inspectItemContent"
                  class="equip-row-100"
                >
                  <template v-slot:content>
                    <LazyRender>
                      <px-table
                        :data="inspectItem.contentItemDTOList"
                        style="margin-bottom: 18px"
                        class="equip-table"
                        size="small"
                        max-height="400"
                        border
                      >
                        <template v-if="inspectItem.inspectItemType === 1">
                          <px-table-column fixed="left" prop="meterReadingModeDesc" label="抄表方式" min-width="80" show-overflow-tooltip>
                            <template #default="scope">
                              <span>{{ scope.row.meterReadingModeDesc }}</span>
                            </template>
                          </px-table-column>
                          <px-table-column fixed="left" prop="meterReadingItem" label="抄表项" min-width="140" show-overflow-tooltip />
                          <px-table-column prop="unit" label="单位" min-width="50" show-overflow-tooltip />
                          <px-table-column prop="maxValue" label="最大值" min-width="100" show-overflow-tooltip />
                          <px-table-column prop="minValue" label="最小值" min-width="100" show-overflow-tooltip />
                          <px-table-column prop="eqpName" label="设备" min-width="260" show-overflow-tooltip>
                            <template #default>
                              <span>{{ `${eqpItem.eqpName}(${eqpItem.eqpId})` }}</span>
                            </template>
                          </px-table-column>
                          <px-table-column prop="autoMeterReadingPoint" label="自动抄表点" min-width="160" show-overflow-tooltip>
                            <template #default="scope">
                              <template v-if="isTableEdit === 'view'">{{ scope.row.autoMeterReadingPointName }}</template>
                              <template v-else>
                                <PointSelect
                                  v-model="scope.row"
                                  :disabled="!eqpItem.eqpId"
                                  :eqpId="eqpItem.eqpId"
                                  :meterReadingPointList="meterReadingPointList"
                                  @focusAutoMeterReadingPoint="focusAutoMeterReadingPoint"
                                />
                              </template>
                            </template>
                          </px-table-column>
                        </template>
                        <template v-else
                          ><px-table-column fixed="left" prop="eqpStatusList" label="适用设备状态" min-width="160" show-overflow-tooltip>
                            <template #default="scope"> {{ renderStatusDesc(scope.row.eqpStatusList) }}</template>
                          </px-table-column>
                          <px-table-column fixed="left" prop="inspectItem" label="巡检项" min-width="160" show-overflow-tooltip />
                          <px-table-column prop="inspectContent" label="巡检内容" min-width="140" show-overflow-tooltip />
                          <px-table-column prop="inspectContentRangeValue" label="内容范围" min-width="160" show-overflow-tooltip>
                            <template #default="scope">
                              <div v-if="scope.row.inspectContentRangeCode === 1">文本</div>
                              <div v-if="scope.row.inspectContentRangeCode === 2">数字</div>
                              <div v-if="scope.row.inspectContentRangeCode === 3">判断：{{ scope.row.inspectContentRangeValue || "-" }}</div>
                              <div v-if="scope.row.inspectContentRangeCode === 4">选择：{{ scope.row.inspectContentRangeValue || "-" }}</div>
                            </template>
                          </px-table-column>
                        </template>
                      </px-table>
                    </LazyRender>
                  </template>
                </SubEditDropDown>
              </template>
            </TitleDropDown>
          </template>
        </EditDropDown>
      </px-scrollbar>
    </div>
    <!-- 选择设备弹窗 -->
    <SelectInspectEquip
      v-if="dialogVisible"
      v-model:is-view="dialogVisible"
      :multiple="false"
      :className="formValue.className"
      :inspectArea="formValue.inspectArea"
      @select-items="selectEquipItems"
    />
  </div>
</template>

<script setup lang="ts">
import { queryMeasureBasicByEqpId } from "@/api/equip/inspectRule";
import LazyRender from "@/components/LazyRender/index.vue";
import EditDropDown from "@/views/all/equip/components/EditDropDown.vue";
import { ref } from "vue";
import SubEditDropDown from "../../components/SubEditDropDown.vue";
import TitleDropDown from "../../components/TitleDropDown.vue";
import PointSelect from "./PointSelect.vue";
import SelectInspectEquip from "./SelectInspectEquip.vue";

defineProps(["isTableEdit", "formValue"]);
const data = defineModel<any>();

const meterReadingPointList = ref([]);
// 自动抄表列表
const focusAutoMeterReadingPoint = async eqpId => {
  meterReadingPointList.value = [];
  if (eqpId) {
    const meterReadingPointObj: any = await queryMeasureBasicByEqpId({
      eqpId
    });
    meterReadingPointList.value = meterReadingPointObj;
  }
};
const selectEquipItems = row => {
  if (row) {
    const { index, $index } = cellInfo.value;
    const { eqpId, eqpName } = row;
    data.value.contentDTOList[index].contentItemDTOList[$index].eqpId = eqpId || "";
    data.value.contentDTOList[index].contentItemDTOList[$index].eqpName = eqpName || "";
  }
};

const cellInfo = ref<any>({});
const dialogVisible = ref(false);
const selectEqp = (index, $index) => {
  cellInfo.value = { index, $index };
  dialogVisible.value = true;
};
const renderStatusDesc = data => {
  if (data) {
    return data.map(item => item.name).join("/");
  }else {
    return "-";
  }
};
</script>

<style lang="scss" scoped>
.view-equip-title {
  height: 22px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #000c;
}

:deep(.equip-table) {
  width: 100%;

  .px-table__header thead tr th {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    background-color: #e7eefb !important;
  }

  td.px-table__cell div {
    width: 100%;
  }
}
</style>
